<script>
import {debounce, throttle} from "lodash"

export default {
  name: "HorseRaceLamp",
  props: {
    /* 轮播图数据 */
    list: {
      type: Array,
      default: () => ([])
    },
    /* 是否自动播放 */
    autoPlay: {
      type: Boolean,
      default: false
    },
    /* 多久播放一次 */
    direction: {
      type: Number,
      default: 1500,
    },
    /* 是否显示按钮*/
    isShowBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentIndex: 0,
      time: null,

    }
  },
  methods: {
    /*点击播放上一张和下一张按钮的回调函数 */
    handleClickButton: throttle(function (deep) {
      this.currentIndex += deep
      if (this.currentIndex >= this.list.length) {
        this.currentIndex = 0
      }
      if (this.currentIndex < 0) {
        this.currentIndex = this.list.length - 1
      }
    }, 1000),
    /* 点击每一个指示器的回调函数 */
    clickIndicatorHandle: throttle(function (index) {
      this.currentIndex = index
    }, 500),
    /* 自动播放的回调函数 */
    autoPlayHandle() {
      if (!this.autoPlay) return
      clearInterval(this.time)
      this.time = setInterval(() => {
        this.currentIndex++
        if (this.currentIndex >= this.list.length) {
          this.currentIndex = 0
        }
      }, this.direction)
    },
    /* 鼠标经过轮播图的回调函数(关闭定时器，停止轮播) */
    enterHandle() {
      clearInterval(this.time)
      this.$emit("update:isShowBtn", true)
    },
    /* 鼠标离开轮播图的回调函数(开启定时器，自动轮播) */
    leaveHandle() {
      this.autoPlayHandle()
      if (this.isShowBtn) return
      this.$emit("update:isShowBtn", false)
    }
  },
  /* 组件挂载完毕(开启定时器进行自动轮播) */
  mounted() {
    this.autoPlayHandle()
  },
  /* 组件销毁之前(清除定时器) */
  beforeDestroy() {
    clearInterval(this.time)
  },

}
</script>

<template>
  <div class="slide-container" @mouseleave="leaveHandle" @mouseenter="enterHandle">
    <!--轮播图区域-->
    <div class="slider-item" :class="{fade:currentIndex===index}" v-for="(item,index) in list" :key="item.id">
      <img :src="item.imgUrl">
    </div>
    <!--点击上一张的按钮-->
    <span class="btn prev iconfont icon-xiangzuo" @click="handleClickButton(-1)" v-if="isShowBtn"></span>
    <!--点击下一张的按钮-->
    <span class="btn next iconfont icon-xiangyou1" @click="handleClickButton(1)" v-if="isShowBtn"></span>
    <!--指示器-->
    <ul class="indicator">
      <li :class="{active:currentIndex===index}" v-for="(item,index) in list" :key="item.id" @click="clickIndicatorHandle(index)"></li>
    </ul>
  </div>
</template>

<style scoped lang="less">
.slide-container {
  position: relative;
  width: 100%;
  height: 100%;

  .slider-item {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .8s linear;

    img {
      width: 100%;
      height: 100%;
    }

    &.fade {
      opacity: 1;
      z-index: 10;
    }
  }

  .btn {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, .2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    z-index: 20;
    transition: all .5s linear;

    &.prev {
      left: 10px;
    }

    &.next {
      right: 10px;
    }

    &:hover {
      background-color: rgba(0, 0, 0, .5);

    }
  }

  .indicator {
    display: flex;
    position: absolute;
    bottom: 10px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    padding: 2px 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;

    li {
      width: 10px;
      height: 10px;
      background-color: rgba(255, 255, 255, .4);
      border-radius: 100%;
      margin: 0 3px;
      cursor: pointer;
      transition: all .4 linear;

      &.active {
        background-color: #ff5000;
      }
    }
  }
}
</style>
